<h1>Radio</h1>

<h4>Defaults</h4>
<FluentRadio></FluentRadio>
<div>
    <FluentRadio>label</FluentRadio>
</div>

<h4>Checked</h4>
<FluentRadio Value="checked" Checked="true"></FluentRadio>

<!-- Required -->
<h4>Required</h4>
<FluentRadio Value="required" Required="true"></FluentRadio>

<!-- Disabled -->
<h4>Disabled</h4>
<FluentRadio Disabled="true"></FluentRadio>
<FluentRadio Disabled="true">label</FluentRadio>
<FluentRadio Disabled="true" Checked="true">checked</FluentRadio>

<h4>Visual vs audio label</h4>
<FluentRadio>
    <span aria-label="Audio label">Visible label</span>
</FluentRadio>

<div style="display: flex; flex-direction: column; margin-top: 12px;">
    <label id="label1">Outside label</label>
    <FluentRadio aria-labelledby="label1"></FluentRadio>
</div>